<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:include="public/page_css::page_css ('换箱')" />
<body>
<div id="simplewizardinwidget" class="wizard" data-target="#simplewizardinwidget-steps">
    <div class="layui-card">
        <form class="layui-form layui-card-header  layui-card-header-auto" id="myform">
            <div class="layui-inline">
                <label class="layui-form-label">箱编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="xbh" id="xbh" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div>
                <div class="layui-col-xs24" >
                    <table data-height="200" data-single-select="false"	 id="table"></table>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">箱型</label>
                    <div class="layui-input-inline">
                        <select lay-ignore="lay-ignore" class="xx" name="xx" style="width: 193px;"></select>
                    </div>
                </div>
                <div class="layui-input-block" style="float: right;">
                    <button class="layui-btn" lay-submit lay-filter="add">换箱</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<div th:include="public/public_js::public_js"></div>
<script th:src="@{/plugin/beyond/assets/js/fuelux/wizard/wizard-custom.js}"></script>

<script>
    $(function () {
        $('.xx').select2({
            ajax: {
                url: '/zxsdwms/wmsSetBox/getXx',
                dataType: 'json',
                type: 'POST',
                contentType: "application/json",
                data: function (params) {
                    var query = {
                        value: params.term
                    };
                    return JSON.stringify(query);
                },
                processResults: function (data) {
                    var arr= new Array();
                    if(data){
                        for (var i=0;i<data.length;i++){
                            arr.push({id:data[i].dictionaryid,text:data[i].value});
                        }
                    }
                    console.log(arr);
                    // Tranforms the top-level key of the response object from 'items' to 'results'
                    return {
                        results: arr
                    };
                },
                cache: true
            },
            language: "zh-CN",
            placeholder: '请输入查询字段',
            allowClear: true
        });
    })
    layui.use(['myform','zzpUtils','form','laydate','jquery','zzpValidation'],function () {
        var form = layui.form,
            zzpUtils = layui.zzpUtils
            ,$ = layui.jquery;
        var $table = zzpUtils.table({
            elem: '#table',
            isApi: true,
            pagination:false,
            showColumns: false,
            columns: [
                {
                    field: 'xbh',
                    title: '箱编号',
                },{
                    field: 'hpbh',
                    title: '货品编号'
                },{
                    field: 'hpmc',
                    title: '货品名称'
                },{
                    field: 'sl',
                    title: '数量',
                }],
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            },
            queryParams: function () {//查询条件
                return zzpUtils.getFormJson($("#myform"));
            },
            detailFormatter: function (index, row) {
                return "这里就没有确定过11";
            }
        });
        $('#xbh').on('input propertychange', function(data) {
            var xbh=$("#xbh").val();
            var query={
                xbh:xbh
            }
            if(xbh.length==18){
                $.ajax({
                    type: "POST",
                    url: "/zxsdwms/wmsSetBox/getXmx",
                    dataType: "JSON",
                    async: false,
                    contentType: 'application/json',
                    data:JSON.stringify(query),
                    success: function (data) {
                        $table.bootstrapTable('append', data.rows);
                    },
                    error: function () { console.log("Error"); }
                });
            }else if(xbh.length!=18&&xbh!=""){
                layer.msg("箱编号输入有误，请重新输入！");
            }
        })
        // 执行保存
        form.on("submit(add)",function(data){
            var field = data.field;
            zzpUtils.confirm("是否确认添加",function(index){
                var rows="";
                //获取table数据
                var TableData = $table.bootstrapTable('getData');
                if (TableData.length > 0) {
                    TableData.forEach(function (item) {
                        var items = item;
                        delete items.index;
                        rows=items;
                    });
                    if(field.xx!=""){
                        $.ajax({
                            url: '/zxsdwms/wmsSetBox/setXx/'+rows.id+"/"+field.xx,
                            type: 'GET',
                            dataType: 'json',
                            contentType: 'application/json',
                            success: function (data) {
                                if (data.type === 'success') {
                                    setTimeout(function(){
                                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                        parent.layer.close(index); //再执行关闭
                                        top.layer.msg(data.title);
                                    },500);
                                }else{
                                    layer.msg(data.title+","+data.message)

                                }
                            },
                            error: function () { console.log("Error"); }
                        })
                    }else{
                        layer.msg('请选择箱型');
                    }
                } else {
                    layer.msg('您还不能保存，明细为必填项');
                }
            })
            return false;
        })
        $(".inline-search-btn").on('click', function () {
            zzpUtils.refreshTable("#table");
        });
    });
</script>
</html>